<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@include file="../common/header.jsp" %>

<div class="easyui-panel" title="编辑AD信息" iconCls="icon-add" fit="true">
	<div style="padding:10px 60px 20px 60px">
		<form id="edit-form" method="post">
			<input type="hidden" name="id" value="${ad.id }">
			<table>
				<tr>
					<td width="60" align="right">名称:</td>
					<td><input type="text" name="name" class="wu-text easyui-validatebox" data-options="required:true, missingMessage:'请填写名称'"  value="${ad.name}"/></td>
				</tr>
				<tr>
					<td width="60" align="right">内容:</td>
					<td><textarea  id="add-content" name="content" style="width:400px;height:150px;"  class="wu-text easyui-validatebox" data-options="required:true, missingMessage:'请填写内容'" >${ad.content}</textarea></td>
				</tr>
				<tr>
					<td>广告封面:</td>
					<td>
						<input class="wu-text easyui-textbox easyui-validatebox" type="text"
							   id="add-photo" name="path" value="${ad.path }"
							   readonly="readonly" value="/upload/news-pic.jpg"
							   data-options="required:true,missingMessage:'请上传AD封面'"/>

						<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-upload"
						   onclick="uploadPhoto()">上传</a>

						<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-eye"
						   onclick="preview()">预览</a>
					</td>
				</tr>
				<tr>
					<td width="60" align="right">链接:</td>
					<td> <input type="text" name="link" class="wu-text easyui-validatebox" data-options="required:true, missingMessage:'请填写内容'" value="${ad.link }"/></td>
				</tr>
				<tr>
					<td width="60" align="right">类型:</td>
					<td>
						<select name="type" class="easyui-combobox" panelHeight="auto" style="width:268px">
							<option value="0" <c:if test="${ad.type==0}">selected="selected"</c:if> >未知</option>
							<option value="1" <c:if test="${ad.type==1}">selected="selected"</c:if> >轮播</option>
							<option value="2" <c:if test="${ad.type==2}">selected="selected"</c:if> >侧边</option>
							<option value="3" <c:if test="${ad.type==3}">selected="selected"</c:if> >链接</option>
						</select>
					</td>
				</tr>
			</table>
		</form>

		<div style="padding:5px">
			<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" onclick="submitForm()">保存</a>
			<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-back" onclick="back()">返回</a>
		</div>
	</div>
</div>

<%@include file="../common/footer.jsp" %>

<!-- 预览图片弹窗 -->
<div id="preview-dialog" class="easyui-dialog" data-options="closed:true,iconCls:'icon-save'"
	 style="width:330px; padding:10px;">
	<table>
		<tr>
			<td><img id="preview-photo" src="${ad.path }" width="300px"></td>
		</tr>
	</table>
</div>

<!-- 上传图片进度条 -->
<div id="process-dialog" class="easyui-dialog" data-options="closed:true,iconCls:'icon-upload',title:'正在上传图片'"
	 style="width:450px; padding:10px;">
	<div id="p" class="easyui-progressbar" style="width:400px;" data-options="text:'正在上传中...'"></div>
</div>

<!-- 文件上传 -->
<input type="file" id="photo-file" style="display:none;" onchange="upload()">
<!-- End of easyui-dialog -->


<!-- 配置文件 -->
<script type="text/javascript" src="/admin/ueditor/ueditor.config.js"></script>
<!-- 编辑器源码文件 -->
<script type="text/javascript" src="/admin/ueditor/ueditor.all.js"></script>
<script type="text/javascript">
	// var ue = UE.getEditor('add-content');

	function back() {
		window.history.back(-1);
	}

	function preview() {
		$('#preview-dialog').dialog({
			closed: false,
			modal: true,
			title: "预览封面图片",
			buttons: [{
				text: '关闭',
				iconCls: 'icon-cancel',
				handler: function () {
					$('#preview-dialog').dialog('close');
				}
			}],
			onBeforeOpen: function () {
				//$("#add-form input").val('');
			}
		});
	}

	//上传图片
	function start() {
		var value = $('#p').progressbar('getValue');
		if (value < 100) {
			value += Math.floor(Math.random() * 10);
			$('#p').progressbar('setValue', value);
		} else {
			$('#p').progressbar('setValue', 0)
		}
	};


	// 上传文件
	function upload() {
		if ($("#photo-file").val() == '') return;
		var formData = new FormData();
		formData.append('photo', document.getElementById('photo-file').files[0]);
		$("#process-dialog").dialog('open');
		var interval = setInterval(start, 200);
		$.ajax({
			url: 'upload_ad_photo',
			type: 'post',
			data: formData,
			contentType: false,
			processData: false,
			success: function (data) {
				clearInterval(interval);
				$("#process-dialog").dialog('close');
				if (data.type == 'success') {
					//上传成功后，将地址回写到表单和预览中
					$("#preview-photo").attr('src', data.filepath);
					$("#add-photo").val(data.filepath);
				} else {
					$.messager.alert("消息提醒", data.msg, "warning");
				}
			},
			error: function (data) {
				clearInterval(interval);
				$("#process-dialog").dialog('close');
				$.messager.alert("消息提醒", "上传失败!", "warning");
			}
		});
	}

	function uploadPhoto() {
		$("#photo-file").click();
	}

	/**
	 *  提交 保存
	 */
	function submitForm() {
		var validate = $("#edit-form").form("validate");
		if (!validate) {
			$.messager.alert("消息提醒", "请检查你输入的数据!", "warning");
			return;
		}
		var data = $("#edit-form").serialize();
		$.ajax({
			url: 'edit',
			type: 'post',
			dataType: 'json',
			data: data,
			success: function (rst) {
				if (rst.type == 'success') {
					$.messager.alert("消息提醒", "更新成功!", "warning");
					setTimeout(function () {
						window.history.go(-1);
					}, 500);
				} else {
					$.messager.alert("消息提醒", rst.msg, "warning");
				}
			}
		});
	}
</script>